<template lang='pug'>
  .msg-content
    Button.msg-socket(v-if="show" @click="value1 = true" type="info") 您有<b>{{count}}</b>条未读消息
    Drawer(title="未读消息" :closable="false" v-model="value1")
      ul
        li.u-d-info(v-for="(item, index) in msgData" @click="readMsg(item.BusinessModule)") {{item.Title}} - {{item.Message}}
</template>

<script>
export default {
  name: "msg",
  props: {
    show: Boolean,
    count: Number,
    msgData: Array
  },
  data() {
    return {
      value1: false
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    readMsg (code) {
      let arr = []
      this.msgData.forEach(item => {
        if (item.BusinessModule === code) arr.push(item.ID)
      })
      console.log(arr)
      this.value1 = false
      this.$emit('read-msg', {
        ids: arr,
        code
      })
    }
  },

  watch: {}
};
</script>
<style lang='less' scoped>
.msg-socket {
  position: fixed;
  bottom: 30px;
  right: 50px;
  z-index: 999;
  b{
    color: #ff0;
    font-size: 20px;
  }
}
.msg-socket {
  animation: shan666 1s infinite ease-in-out;
  animation-fill-mode: both;
}

@keyframes shan666 {
  0% {
    opacity: 0.5;
    filter: alpha(opacity=20);
    -webkit-transform: scale(1); //缩小
  }
  50% {
    opacity: 1;
    filter: alpha(opacity=50);
    -webkit-transform: scale(1.1); //放大
  }
  100% {
    opacity: 0.5;
    filter: alpha(opacity=20);
    -webkit-transform: scale(1); //缩小
  }
}
</style>